<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>
    <link rel="stylesheet" type="text/css" href="./flvplayer/demo.css" />
</head>


<script src="flvplayer/script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="flvplayer/script/json2.js"></script>
<script src="flvplayer/script/lang.js" type="text/javascript"></script>
<script src="flvplayer/script/util.js" type="text/javascript"></script>
<script src="flvplayer/script/jquery.cookie.js" type="text/javascript"></script>

<body>
    
    <div class="mainContainer">
        <div style="float:left; ">
            <div>
                <label for="DEVIP">设备IP:</label>
                <input id="DEVIP" type="text" style="min-width: 200px;" value="172.18.31.111" />    
            </div>
			<div>
                <label for="DEVPORT">端口:</label>
                <input id="DEVPORT" type="text" style="min-width: 200px;" value="0" />
            </div>
            <div>
                <label for="DEVADMIN">用户名:</label>
                <input id="DEVADMIN" style="min-width: 200px;"  type="text" value="admin" />
            </div>
            <div>
                <label for="DEVPASSWD"> 密码 :</label>
                <input id="DEVPASSWD" type="text" style="min-width: 200px;" value="123456" />    
            </div>
            <div>
                <label for="DEVTYPE">接入方式:</label>
                <input id="DEVTYPE" type="text" style="min-width: 180px;" value="hiksdk" />    
            </div>
            <div>
                <label for="CHAN">通道:</label>
                <input id="CHAN" type="text" style="min-width: 200;" value="1" />    
            </div>
            <div>
                <button onclick="StartStream()">开启视频</button>
            </div>
            <div>
                <label for="PLAYBACKSTARTTIME">录像开始时间:</label>
                <input id="PLAYBACKSTARTTIME" type="text" style="min-width: 150;" value="20200101 12:00:00" />    
            </div>
            <div>
                <label for="PLAYBACKENDTIME">录像结束时间:</label>
                <input id="PLAYBACKENDTIME" type="text" style="min-width: 150;" value="20200101 23:00:00" />    
            </div>
            <div>
                <button onclick="StartPlayback()">开始回放</button>
            </div>    
        </div>
        <div style="float:left;width: 1152px;">
        <div>
            <div id="streamURL">
                <div class="url-input">
                    <label for="sURL">Stream URL:</label>
                    <input id="sURL" type="text" value="http://127.0.0.1/flv/7182741-1.flv" />
                </div>
            </div>
        </div>
			<div style="width:600px;height: 400px; background-color:pink;margin: auto;">
				<div id="newplay" ></div>
			</div>
        <div class="controls">
            <button onclick="flv_load()">Load</button>
            <button onclick="flv_start()">Start</button>
            <button onclick="flv_pause()">Pause</button>
            <button onclick="flv_destroy()">Destroy</button>
            <input style="width:100px" type="text" name="seekpoint"/>
            <button onclick="flv_seekto()">SeekTo</button>
            <input style="width:50px" id="SESSION" type="text" value=1 />
            <button onclick="StopStream()">Stop</button>
            <button onmousedown="ptz_up_start()" onmouseup="ptz_up_end()">Up</button>
            <button onmousedown="ptz_down_start()" onmouseup="ptz_down_end()">Down</button>
            <button onmousedown="ptz_left_start()" onmouseup="ptz_left_end()">Left</button>
            <button onmousedown="ptz_right_start()" onmouseup="ptz_right_end()">Right</button>
            <button onmousedown="ptz_zoomin_start()" onmouseup="ptz_zoomin_end()">ZoomIn</button>
            <button onmousedown="ptz_zoomout_start()" onmouseup="ptz_zoomout_end()">ZoonOut</button>
        <div style="clear:both"></div>
    </div>

    <script src="./EasyWasmPlayer.js"></script>
    <script>
		var heartTimer;
		callbackfun = function (e) { 
            console.log(e);
        }
		
		function flv_load() {
				flv_start();
        }
		
        function flv_start() {
		    var flv_url = document.getElementById('sURL').value;
			console.log(flv_url);
			
			if(typeof player !== "undefined"){
				if(player != null){
					flv_destroy();
				}
			}
			player = new WasmPlayer(null, 'newplay', callbackfun,{
            Height:true
        })
			
            player.play(flv_url,1);
        }

        function flv_pause() {
            player.pause();
        }

        function flv_destroy() {
            player.destroy();
			player = null;
        }

        function StartStream(){
            var devip = document.getElementById('DEVIP').value;
			var port =  parseInt(document.getElementById('DEVPORT').value);
            var user = document.getElementById('DEVADMIN').value;
            var passwd = document.getElementById('DEVPASSWD').value;
            var type = document.getElementById('DEVTYPE').value;
            var chan =  parseInt(document.getElementById('CHAN').value);
            function dealStartStream(text) {
                if (text != "") {
                    var flvurl=text.flvurl;
                    var session=text.session;
                    document.getElementById('sURL').value=flvurl;
                    document.getElementById('SESSION').value=session;
					flv_start();
					if (!heartTimer) {
                        heartTimer = setInterval(function () {
                        heartRealplay();
                    }, 30000);
                }
                }
            }
            start_stream(devip, port, user, passwd, type, chan, dealStartStream);
        }

        function StopStream(){
            var session=parseInt(document.getElementById('SESSION').value);
            stop_stream(session);  
            flv_destroy(); 
			if (heartTimer) {
				clearInterval(heartTimer);
				heartTimer = null;
			}
        }
		
		function heartRealplay() {
			var session=parseInt(document.getElementById('SESSION').value);
			hbeart_stream("heartbeat_stream", session);
		}

        function ptz_up_start(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,21,0);
        }

        function ptz_up_end(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,21,1);
        }

        function ptz_down_start(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,22,0);
        }

        function ptz_down_end(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,22,1);
        }

        function ptz_left_start(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,23,0);
        }

        function ptz_left_end(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,23,1);
        }

        function ptz_right_start(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,24,0);
        }

        function ptz_right_end(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,24,1);
        }

        function ptz_zoomin_start(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,29,0);
        }

        function ptz_zoomin_end(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,29,1);
        }

        function ptz_zoomout_start(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,30,0);
        }

        function ptz_zoomout_end(){
            var session=parseInt(document.getElementById('SESSION').value);
            ptz_ctrl(session,30,1);
        }

        function StartPlayback(){
            var devip = document.getElementById('DEVIP').value;
			var port =  parseInt(document.getElementById('DEVPORT').value);
            var user = document.getElementById('DEVADMIN').value;
            var passwd = document.getElementById('DEVPASSWD').value;
            var type = document.getElementById('DEVTYPE').value;
            var chan =  parseInt(document.getElementById('CHAN').value);
            var starttime = document.getElementById('PLAYBACKSTARTTIME').value;
            var endtime = document.getElementById('PLAYBACKENDTIME').value;    
            function dealStartPlayback(text) {
                if (text != "") {
                    var flvurl=text.flvurl;
                    var session=text.session;
                    document.getElementById('sURL').value=flvurl;
                    document.getElementById('SESSION').value=session;
					console.log('MediaDataSource');
					flv_start();
                }
            }
            start_playback(devip, port,user, passwd, type, chan, starttime, endtime, dealStartPlayback);
        }
		
    </script>
    
</body>

</html>